<!DOCTYPE html>
<html>
<head>
	<title>add_class</title>
	<style type="text/css">
		.box{
			position: relative;
			width: 100%;
			min-width: 1200px;
			height: 100%;
			min-height: 600px;
			display: flex;
			flex-direction: row;
			/*justify-content: space-between;*/
		}
		.b_item{
			width: 160px;
			height: 160px;
			border-radius: 50%;
			position: absolute;
			transition: all 1.5s;
			/*top: */
		}
		.active1{
		  	background: linear-gradient(180deg, #ef7c7b, #d21412); /* 标准的语法 */
		}
			/*background: -webkit-linear-gradient(180deg, #ef7c7b, #d21412); 
		  	background: -o-linear-gradient(180deg, #ef7c7b, #d21412); 
		  	background: -moz-linear-gradient(180deg, #ef7c7b, #d21412); */
		.active2{
			background: -webkit-linear-gradient(60deg, #ef7c7b, #d21412); /* Safari 5.1  */
		  	background: -o-linear-gradient(60deg, #ef7c7b, #d21412); /* Opera 11.1 - 12.0 */
		  	background: -moz-linear-gradient(60deg, #ef7c7b, #d21412); /* Firefox 3.6 - 15 */
		  	background: linear-gradient(60deg, #ef7c7b, #d21412); /* 标准的语法 */
		}
		.active3{
			background: -webkit-linear-gradient(120deg, #ef7c7b, #d21412); /* Safari 5.1  */
		  	background: -o-linear-gradient(120deg, #ef7c7b, #d21412); /* Opera 11.1 - 12.0 */
		  	background: -moz-linear-gradient(120deg, #ef7c7b, #d21412); /* Firefox 3.6 - 15 */
		  	background: linear-gradient(120deg, #ef7c7b, #d21412); /* 标准的语法 */
		}

	</style>
</head>
<body>

	<div id="box" class="box">
		<div class="b_item active1"></div>
		<div class="b_item active2"></div>
		<div class="b_item active3"></div>
		<div class="b_item"></div>
	</div>

<script type="text/javascript">
	
	var box = document.getElementById('box').getElementsByTagName('div')

	function addClassBg() {
		for (var i = 0; i < box.length; i++) {
			// console.log(box[i])
			var rangle = Math.floor(Math.random() * 180) + 'deg'
			// console.log(rangle) 
			box[i].style.transitionTimingFunction=`cubic-bezier( ${Math.random()}, ${Math.random()}, ${Math.random()}, ${Math.random()} )`
			box[i].style.top = Math.floor(Math.random() * 500) + 'px'
			box[i].style.left = Math.floor(Math.random() * 700) + 'px'
			box[i].style.backgroundImage = `linear-gradient(${rangle}, #ef7c7b, #d21412)`
			
		}
	}

	setInterval(addClassBg, 1000)

</script>
</body>
</html>